<template>
    <TCollapse title="物料信息">
        <el-form :model="prjDetail" label-width="160px" class="pms-form" size="mini" :inline="true">
            <el-row :gutter="24" style="margin-bottom: 10px">
                <el-col :span="12">
                    <el-form-item label="物料名称" style="width: 100%" prop="categoryName">
                        <el-input v-model="prjDetail.categoryName" class="pms-zr-input" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="物料编码" style="width: 100%" prop="categoryCode">
                        <el-input v-model="prjDetail.categoryCode" class="pms-zr-input" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="调整数量" style="width: 100%" prop="categoryCode">
                        <el-input v-model="prjDetail.transferNum" class="pms-zr-input" :disabled="true"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="6">
                    <el-form-item label="资源资产编码" style="width: 100%" prop="categoryCode" v-if="prjDetail.resourceAssetCode">
                        <el-input v-model="prjDetail.resourceAssetCode" class="pms-zr-input" :disabled="true"/>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="标签ID" style="width: 100%" prop="labelId" class="jumpRow" v-if="prjDetail.labelId">
                        <div @click="jump(prjDetail.resourceAssetCode,prjDetail.labelId)">
                            <el-input v-model="prjDetail.labelId" class="jumpRow pms-zr-input" readonly/>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </TCollapse>
</template>

<script>
import {openAssetFull} from "@/api/material";
import $ from "jquery";
export default {
    name: 'MaterialInfo',
    props: {
        prjDetail: {
            type: Object,
            default: () => ({})
        }
    },
    data(){
        return {
            url: '',
            token: '',
            userId: '',
            acctId: '',
        }
    },
    async mounted() {
        const openAssetFullRes = await openAssetFull()
        if (+openAssetFullRes.code === 200) {
            this.url = openAssetFullRes.data.url
            this.token = openAssetFullRes.data.token
            this.userId = openAssetFullRes.data.userId
            this.acctId = openAssetFullRes.data.acctId
        }
    },
    methods:{
        jump(resourceAssetCode,labelId) {
            const toUrl = `${this.url}ctb_thematic_web/newTowerSkip/assetsRecordNew?res_id=${labelId}&resourceAssetCode=${resourceAssetCode}`
            const params = {}
            params.pwdaToken = this.token
            params.acctId = this.acctId
            params.userName = this.userId
            const newWin = window.open()
            const form = $("<form method='post'></form>")
            form.attr({ action: toUrl })
            $.each(params, function(key, value) {
                const input = $("<input type='hidden' >")
                input.attr({ name: key })
                input.val(value)
                form.append(input)
            })
            form.appendTo(newWin.document.body)
            form.submit()
        },
    }
}
</script>

<style scoped lang="scss">
.jumpRow{
    ::v-deep .el-input__inner{
        color: #53c7f8 !important;
        cursor: pointer !important;
        background-color: #f7f7f7 !important;
    }
}
</style>